<template>
  <el-drawer title="研判分析" v-model="show" size="50%" @open="handleOpen">
    <ThoughtChainItem v-for="item in chains" :data="item" :key="item" />
  </el-drawer>
</template>

<script setup>
import data from './result-a.json'
data.topology = JSON.parse(data.topology)

import axios from 'axios'

import ThoughtChain from './ThoughtChain.vue'
import ThoughtChainItem from './ThoughtChainItem.vue'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Object },
  isTest: false,
})

const show = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

const chains = ref([])

const handleOpen = () => {
  test()
}

function test() {
  setTimeout(() => {
    chains.value = [
      {
        title: '检查到可疑活动并创建报警',
        icon: 'alarm',
        type: 'host',
        data: {
          host_ip: '10.240.19.38',
          host_name: '陶明威的主机',
          level: 'high',
          level_code: 2,
        },
      },
      {
        title: '创建告警研判分析框架，开始基础研判',
        icon: 'analysis',
        type: 'host',
        data: '提取数据成功，进行基础研判',
      },
      {
        title: '开始研判',

        content: '告警数据分析中...',
      },
      {
        title: '进程分析',
        icon: 'process',
        content: '系统正在进行深度分析...',
        childrens: [
          {
            title: '进程分析',
            type: 'markdown',
            content: data.analysis,
          },
          {
            title: '行为分析',
            type: 'markdown',
            content: data.guess,
          },
          {
            title: '拓扑图',
            type: 'topo',
            content: data.guess,
          },
        ],
      },
      {
        title: '行为分析',
        icon: 'behavior',
        childrens: [
          {
            title: '进程分析',
          },
          {
            title: '行为分析',
          },
          {
            title: '拓扑图',
          },
        ],
      },
      {
        title: '告警研判分析',
        childrens: [
          {
            title: '进程分析',
          },
          {
            title: '行为分析',
          },
          {
            title: '拓扑图',
          },
        ],
      },
    ]
  }, 500)
}
</script>

<style lang="scss" scoped></style>
